<template>
	<view class="content">
		<view class="top-bg">
			<view class="text">我的仓库</view>
		</view>
		<scroll-view scroll-y class="center-box" @scrolltolower="getList">
			<block v-if="navList.orderList.length > 0">
				<view class="item" v-for="(item,index) in navList.orderList" :key="index">
					<view class="box1" @click="goUrl('/pages/index/productDetails?id='+item.goodsId)">
						<view class="title-box">
							<view class="left">
								<image :src="item.level==1?'/static/warehouse/lv1.png':item.level==2?'/static/warehouse/lv2.png':item.level==3?'/static/warehouse/lv3.png':item.level==4?'/static/warehouse/lv4.png':''"></image>
								<text>{{item.type==0?'开盒商品':item.type==1?'兑换商品':item.type==3?'免费抽奖获得':item.type==4?'置换商品':item.type==5?'拼团商品':'赠送商品'}}</text>
							</view>
							<text class="right">{{item.createTime | toTime}}</text>
						</view>
						<view class="con-box">
							<view class="left">
								<view class="img">
									<image :src="item.goodsImageUrl" ></image>
								</view>
							</view>
							<view class="right relative">
								<view class="title ">{{item.goodsName}}</view>
								<view class="gg">{{item.standards}}</view>
								<view class="pb">
									<text>￥{{item.price}}</text>
									<text>x{{item.count}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="btn-box">
						<view class="btn btn1" @click="openPoupSucaa" v-if="item.telephoneBill==1">使用</view>
						<view class="btn btn1" v-if="item.typeId=='80b2b724dea040c1868844278fcc4c2c'" @click="openPoupSucaa">使用</view>
						<view class="btn btn1" v-if="item.telephoneBill==0&&item.typeId!=='80b2b724dea040c1868844278fcc4c2c'" @click="openPoupSucaa">提货</view>
					</view>
				</view>
				<uni-load-more :status="navList.loadingType"></uni-load-more>
			</block>
			<block v-else>
				<view class="kong-box">
					<my-kong v-if="$cookie.get('token')"></my-kong>
					<button v-else class="btn-login" @click="goLogin">去登录</button>
				</view>
			</block>
		</scroll-view>
		
		<!--手机号充值弹窗 -->
		<my-popup ref="showPoup" type="center" :maskClick="true" @change="changePoup" class="pop-box">
			<view class="uni-tip">
				<image class="close" src="/static/index/closepop.png" @click="closePoup"></image>
				<input class="input-phone" placeholder-style="color:#FDD2AE;" placeholder="请输入手机号" type="number" maxlength="11" @input="onInput"/>
				<view class="btn" @click="submit">立即提交</view>
			</view>
		</my-popup>
		<!--手机号充值成功弹窗 -->
		<my-popup ref="showPoupSuc" type="center" :maskClick="true" @change="changePoupSuc" class="pop-box">
			<view class="uni-tip-success">
				<view class="title">提交成功</view>
				<view class="ts">话费将在72小时内充值到账，可在我的订单列表查看进度</view>
				<view class="btn-box">
					<view class="btn" @click="showToast">我知道了</view>
				</view>
			</view>
		</my-popup>
		<!--引流弹窗 -->
		<my-popup ref="showPoupSuc" type="center" :maskClick="true" @change="changePoupSucaa" class="pop-box">
			<view class="uni-tip-successaa">
				<view class="title">提货请下载APP</view>
				<image class="ts" src="https://home.miaokaikeji.com/web/playProduce/down.png" mode="widthFix"></image>
				<view class="aaa">截图保存二维码</view>
				<view class="btn-box">
					<view class="btn" @click="closePoupSucaa" >关闭弹窗</view>
					<view class="btn" @click="down">下载</view>
				</view>
			</view>
		</my-popup>
	</view>
</template>

<script>
	var _this;
	import { priceInteger, checkMobile } from "@/utils";
	export default {
		data() {
			return {
				navList: {
					loadingType: 'more',
					page: 1,
					orderList: [],
				},
				pageSize:10, //分页条数
				phone:'',
				phoneId:''
			};
		},
		onLoad() {
			_this=this;
		},
		onShow() {
			if(this.$cookie.get('token')){
				_this.navList.loadingType='more';
				_this.navList.page=1;
				_this.getList('reset');
			}
		},
		methods:{
			getList(source){
				var navItem = _this.navList;
				//这里是将订单挂载到tab列表下
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (navItem.loadingType === 'noMore') {
					return; //防止数据没有了还在加载
				}
				navItem.loadingType = 'loading';
				_this.$HTTP({
					method: 'GET',
					url: 'shopServer/store/getMyStoreList',
					data: {
						limit: _this.pageSize,
						page:  navItem.page,
						time: Date.parse(new Date())
					}
					// header:'form'
				}).then(res => {
					navItem.page++;
					res.forEach(item => {
						item.price = priceInteger(item.price);
					});
					if (source == 'reset') {
						navItem.orderList = res;
					} else {
						res.forEach(item => {
							navItem.orderList.push(item);
						});
					}
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					_this.$set(navItem, 'loaded', true);
					
					if (res.length < _this.pageSize) {
						navItem.loadingType = 'noMore';
						return;
					}
					
					navItem.loadingType = 'more';
				}).catch(err => {
					console.log(err);
				});
			},
			// 跳转其他页面
			goUrl(url){
				_this.$routerTo.navigateTo({
					path: url
				});
			},
			// 跳转登录界面（抛弃缓存页面）
			goLogin(){
				_this.$routerTo.reLaunch({
					path: '/pages/login/login'
				});
			},
			// 跳转实名认证
			goName(number,item){
				_this.$routerTo.navigateTo({
					path: '/pages/index/realName?number=' + number+'&item='+JSON.stringify(item)
				});
			},
			giveFunc(item){
				let userInfo=_this.$cookie.get('userInfo')
				// 	0不是主播 1是主播
				if(userInfo.anchor==1){
					_this.$api.msg('您暂时无法赠送，请联系客服人员');
					return;
				}
				_this.$routerTo.navigateTo({
					path: '/pages/index/give?item='+JSON.stringify(item)
				});
			},
			// 手机号充值弹窗事件
			changePoup(e) {},
			closePoup() {
				_this.$nextTick(() => {
					_this.$refs['showPoup'].close();
				});
			},
			openPoup(id) {
				_this.phoneId=id;
				_this.$nextTick(() => {
					_this.$refs['showPoup'].open();
				});
			},
			// 手机号充值成功弹窗
			changePoupSuc(e) {},
			closePoupSuc() {
				_this.$nextTick(() => {
					_this.$refs['showPoupSuc'].close();
				});
			},
			openPoupSuc() {
				_this.$nextTick(() => {
					_this.$refs['showPoupSuc'].open();
				});
			},
			showToast(){
				_this.closePoupSuc();
			},
			onInput(event){
				_this.phone=event.target.value;
			},
			down(){
				const {aplus_queue} = window;
				aplus_queue.push({
				 action: 'aplus.record',
				  arguments: ['down','1']
				});
				aplus_queue.push({
				 action: 'aplus.record',
				  arguments: ['createOrder','1']
				});
				window.location.href='https://home.miaokaikeji.com/web/down/';
			},
			changePoupSucaa(e) {},
			closePoupSucaa() {
				_this.$nextTick(() => {
					_this.$refs['showPoupSuc'].close();
				});
			},
			openPoupSucaa() {
				_this.$nextTick(() => {
					_this.$refs['showPoupSuc'].open();
				});
			},
			submit(){
				if (!_this.phone) {
					_this.$api.msg('请填写手机号');
					return;
				}
				if (!checkMobile(_this.phone)&&_this.phone) {
					_this.$api.msg('手机号格式错误');
					return;
				}
				_this.$HTTP({
					method: 'POST',
					url: 'shopServer/order/createTelephoneBillOrder',
					data: {
						storeId: _this.phoneId,
						phone: _this.phone,
						time: Date.parse(new Date())
					},
					header:'form'
				}).then(res => {
					_this.navList.loadingType='more';
					_this.navList.page=1;
					_this.getList('reset');
					_this.closePoup();
					_this.openPoupSuc();
				}).catch(err => {
					console.log(err);
				});
			}
		}
	}
</script>

<style>
	page{
		background: #F6F9FE;
	}
</style>
<style lang="scss" scoped>
// 引流弹窗
.uni-tip-successaa{
	width: 580rpx;
	// height: 473rpx;
	background: linear-gradient(180deg, #FFF9EF 0%, #FFFFFF 100%);
	position: relative;
	z-index: 10;
	border-radius: 30rpx;
	box-sizing: border-box;
	padding: 75rpx 60rpx 80rpx 60rpx;
	.title{
		width: 100%;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	.ts{
		width: 100%;
		margin-top: 24rpx;
	}
	.aaa{
		width: 100%;
		font-size: 26rpx;
		font-weight: bold;
		color: red;
		text-align: center;
		margin-top: 30rpx
	}
	.btn-box{
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		.btn{
			width: 210rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #FFC426;
			border-radius: 43rpx;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
}
// 手机号充值成功弹窗
.uni-tip-success{
	width: 580rpx;
	height: 473rpx;
	background: linear-gradient(180deg, #FFF9EF 0%, #FFFFFF 100%);
	position: relative;
	z-index: 10;
	border-radius: 30rpx;
	box-sizing: border-box;
	padding: 75rpx 40rpx 0 40rpx;
	.title{
		width: 100%;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	.ts{
		width: 100%;
		text-align: center;
		margin-top: 24rpx;
		font-size: 28rpx;
		color: #333333;
	}
	.btn-box{
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 90rpx;
		.btn{
			width: 270rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #FFC426;
			border-radius: 43rpx;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
}
// 手机号充值弹窗
.uni-tip{
	width: 571rpx;
	height: 605rpx;
	background-image: url('https://home.miaokaikeji.com/web/applet/newimg/warehouse-phone.png');
	background-size: 100% 100%;
	position: relative;
	z-index: 10;
	.close{
		width: 58rpx;
		height: 58rpx;
		position: absolute;
		right: -29rpx;
		top: -29rpx;
	}
	.input-phone{
		width: 400rpx;
		height: 96rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 48rpx;
		font-size: 32rpx;
		text-align: center;
		position: absolute;
		top: 111rpx;
		left: calc(50% - 200rpx);
	}
	.btn{
		width: 450rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		color: #FE2D28;
		text-align: center;
		position: absolute;
		left: calc(50% - 225rpx);
		bottom: 90rpx;
		border-radius: 40rpx;
	}
}
	.content{
		width: 100%;
		.kong-box{
			width: 100%;
			height: 800rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.btn-login{
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				color: white;
				font-size: 28rpx;
				background: $my-color;
				text-align: center;
				border-radius: 40rpx;
			}
		}
		.top-bg{
			width: 100%;
			position: fixed;
			left: 0;
			top: 0;
			height: 580rpx;
			background-image: url('https://home.miaokaikeji.com/web/applet/newimg/warehouse-topbg.png');
			background-size: 100% 100%;
			z-index: 1;
			.text{
				width: 100%;
				box-sizing: border-box;
				padding: 0 40rpx;
				font-size: 46rpx;
				font-weight: bold;
				color: #333333;
				margin-top: 120rpx;
			}
		}
		.center-box{
			width: 100%;
			height: calc(100vh - 210rpx);
			box-sizing: border-box;
			padding: 0 24rpx 0 24rpx;
			z-index: 2;
			position: fixed;
			left: 0;
			top: 210rpx;
		}
		.item{
			width: 100%;
			margin-bottom: 45rpx;
			.box1{
				width: 100%;
				height: 311rpx;
				background-image: url('https://home.miaokaikeji.com/web/applet/newimg/warehouse-bg.png');
				background-size: 100% 100%;
			}
			.title-box{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding-left: 16rpx;
				.left{
					display: flex;
					align-items: center;
					image{
						width: 60rpx;
						height: 66rpx;
					}
					text{
						font-size: 30rpx;
						color: #333333;
						font-weight: bold;
						margin-left: 10rpx;
					}
				}
				.right{
					font-size: 24rpx;
					color: rgba(0,0,0,0.4);
				}
			}
			.con-box{
				width: 100%;
				height: 247rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 30rpx 24rpx 0 32rpx;
				box-shadow: 0rpx 6rpx 20rpx 1rpx rgba(18,46,98,0.04);
				.left{
					width: 200rpx;
					height: 200rpx;
					margin-right: 24rpx;
					.img{
						width: 200rpx;
						height: 200rpx;
						overflow: hidden;
						display: flex;
						justify-content: center;
						align-items: center;
						image{
							width: 200rpx;
							height: 126rpx;
						}
					}
				}
				.right{
					width: 100%;
					height: 200rpx;
					display: grid;
					.title{
						width: 100%;
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.gg{
						width: 100%;
						font-size: 28rpx;
						color: #999999;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						position: absolute;
						left: 0;
						top: 60rpx;
					}
					.pb{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
						position: absolute;
						left: 0;
						bottom: 15rpx;
					}
				}
			}
			.btn-box{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top: 30rpx;
				.btn{
					width: 151rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					font-size: 30rpx;
					margin-left: 32rpx;
					border-radius: 28rpx;
					color: white;
				}
				.btn1{
					background: linear-gradient(180deg, #33C8FF 0%, #80FFF5 100%);
				}
				.btn2{
					background: linear-gradient(180deg, #FFAF43 0%, #FFDD80 100%);
				}
				.btn3{
					background: linear-gradient(180deg, #9F74FF 0%, #C980FF 100%);
				}
			}
		}
	}
</style>
